<template>
  <div>
    <div>
      <p>我的工单</p>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 图片列 -->
      <el-table-column label="问题图片" width="100">
        <template #default="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.imageUrl"
            :preview-src-list="[row.imageUrl]"
          ></el-image>
        </template>
      </el-table-column>
ikm y
      <!-- 工单号列 -->
      <el-table-column prop="orderNo" label="工单号"></el-table-column>

      <!-- 工单状态列 -->
      <el-table-column label="工单状态">
        <template #default="{ row }">
          <span v-if="row.workOrderStatus === 4">线下已结案待评价</span>
          <span v-else>{{ getStatusText(row.workOrderStatus) }}</span>
        </template>
      </el-table-column>

      <!-- 创建时间列 -->
      <el-table-column prop="workOrderCreateTime" label="创建时间"></el-table-column>

      <!-- 问题描述列 -->
      <el-table-column prop="workOrderDescription" label="问题描述"></el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <div v-if="row.workOrderStatus === 4">
            <el-button type="primary" @click="handleEvaluation(row)">评价</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框放在最外层的 <div> 内部 -->
    <div>
      <el-dialog title="评价问题解决" :visible.sync="rateDialogVisible" width="30%">
        <div style="text-align: center;">
          请为问题解决情况评分:
          <el-rate v-model="userRating" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="submitRating">提交</el-button>
          <el-button @click="rateDialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyOrder", // 组件名称
  data() {
    return {
      rateDialogVisible: false,
      userRating: 0, // 新增: 存储用户评分
      tableData: [], // 初始化为数组
      currentOrder: null, // 新增: 保存当前工单信息
    };
  },
  methods: {
    handleEvaluation(row) {
      console.log('评价工单:', row); // 打印出当前评价的工单
      this.userRating = 0; // 清空之前的评分
      this.currentOrder = row; // 保存当前工单信息
      this.rateDialogVisible = true; // 显示对话框
    },
    // 获取工单状态对应的文本
    getStatusText(status) {
      switch (status) {
        case 0: return '创建未接单';
        case 1: return '开启线上处理未接单';
        case 2: return '线上处理中';
        case 3: return '开启线下处理';
        case 4: return '线下处理已结案';
        case 6: return '线上处理已结案';
        case 7: return '线下处理已结案';
        default: return '未知状态';
      }
    },
    BookRemoval() {
      this.$http.post('/tWorkOrder/userWorkOrder')
        .then(response => {
          console.log(response);
          this.tableData = response.data.data;
        })
        .catch(error => {
          console.error('获取数据失败:', error);
        });
    },
    submitRating() {
      if (this.userRating === 0) {
        this.$message.warning('请至少选择一个评分!');
        return;
      }

   // 创建 FormData 对象
    const formData = new FormData();
    formData.append('orderId', this.currentOrder.orderNo); // 工单号
    formData.append('score', this.userRating); // 用户评分

    // 发送请求以更新状态和评分
    this.$http.post('/tWorkOrder/rate', formData)
      .then(response => {
        if (response.data.code === 200) {
          this.$message.success('评分提交成功!');
          this.rateDialogVisible = false; // 关闭对话框
          this.BookRemoval(); // 刷新工单数据
        } else {
          this.$message.error('评分提交失败:' + response.data.message);
        }
      })
      .catch(error => {
        console.error('评分请求失败:', error);
      });
    },
  },
  created() {
    this.BookRemoval();
  }
}
</script>

<style scoped>
/* 添加必要的样式 */
</style>
